<template>
  <div>
    <div class="main">
      <van-calendar
        color="#1989fa"
        v-model="showCalendar"
        :min-date="new Date('2000-01-01')"
        :max-date="new Date('2040-01-01')"
        :default-date="tempDate"
        @confirm="onConfirm"
      />
      <eagle-date
        label="日期"
        required
        ref="eagleDate"
        :date.sync="form.CheckDate"
      ></eagle-date>

      <eagle-input
        readonly
        class="input_text"
        name="MainChnName"
        v-model="form.MainChnName"
        label="责任人"
        placeholder="请选择"
        required
        @click-input="goPeopleList"
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearMainChnName"
          />
        </template>
      </eagle-input>
      <eagle-input
        readonly
        class="input_text"
        name="OrgName"
        v-model="form.OrgName"
        label="部门"
        placeholder="请选择"
        @click-input="goDeptment"
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearOrgCode"
          />
        </template>
      </eagle-input>

      <eagle-input
        label="考核内容"
        rows="3"
        autosize
        type="textarea"
        v-model="form.CheckContent"
        required
        isInputText
      >
      </eagle-input>

      <eagle-input
        label="考核结果"
        rows="3"
        autosize
        type="textarea"
        v-model="form.CheckResult"
        required
        isInputText
      >
      </eagle-input>

      <eagle-input
        label="备注"
        rows="3"
        autosize
        type="textarea"
        v-model="form.Remarks"
        isInputText
      >
      </eagle-input>

      <div class="btn_submit">
        <eagle-button
          block
          type="info"
          @click="submit"
        > 提交 </eagle-button>
      </div>
    </div>
    <user-choose-dialog
      title="选择责任人"
      :show.sync="userPopup"
      :selectedValue="form.MainUserName"
      :IsAccounted="true"
      :isMulti="false"
      @callback="_chooseMannerItem"
      ref="userChoose"
    >
    </user-choose-dialog>
    <deptment-choose
      :show.sync="DeptmentShow"
      :selectedValue="form.OrgCode"
      @callback="_chooseDeptmentCb"
      :isMulti="false"
      ref="deptmentChoose"
    >
    </deptment-choose>
  </div>
</template>

<script>
import { formatDate, getDate } from "@/utils/getDate";
import { mapGetters } from "vuex";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";

export default {
  components: {
    DeptmentChoose,
    UserChooseDialog,
  },
  data() {
    return {
      id: this.$route.query.id,
      showCalendar: false,
      form: {},
      userPopup: false,
      DeptmentShow: false,
      tempDate: new Date(),
    };
  },
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },
  created() {
    if (this.$route.query.id != null) {
      (this.id = this.$route.query.id), this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let params = { id: this.id };
      if (this.id == 0) {
        this.$axios
          .get("/SiteProductCheckRecord/InitEntity", { params: params })
          .then((res) => {
            this.form = res.data;
          });
      } else {
        this.$axios
          .get("/SiteProductCheckRecord/GetDetail", { params: params })
          .then((res) => {
            res.data.CheckDate = getDate(res.data.CheckDate);
            this.form = res.data;
          });
      }
    },
    _chooseMannerItem(userlist) {
      (this.form.MainChnName = userlist.name),
        (this.form.MainUserName = userlist.code);
      this.userChooseDialogShow1 = false;
    },
    submit() {
      if (!this.form.CheckDate) {
        return this.$toast("请选择日期");
      }

      if (!this.form.MainChnName) {
        return this.$toast("请选择责任人");
      }

      if (!this.form.CheckContent) {
        return this.$toast("请输入考核内容");
      }

      if (!this.form.CheckResult) {
        return this.$toast("请输入考核结果");
      }
      let form1 = this.form;
      form1.CompanyCode = this.CompanyCode;
      this.$axios
        .post("/SiteProductCheckRecord/Edit", form1)
        .then((res) => {
          this.loading = false;
          this.$toast.success("保存成功！");
          setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    clearMainChnName() {
      this.form.MainChnName = "";
      this.form.MainUserName = "";
    },

    clearOrgCode() {
      
      this.form.OrgCode = "";
      this.form.OrgName = "";
    },
    onConfirm(date) {
      const dateTime = formatDate(date);
      this.form.CheckDate = getDate(dateTime);
      this.showCalendar = false;
    },
    goPeopleList() {
      this.userPopup = true;
    },
    // 部门
    goDeptment() {
      this.DeptmentShow = true;
    },
    _chooseDeptmentCb(item) {
      this.form.OrgName = item.name;
      this.form.OrgCode = item.code;
      this.deptmentShow = false;
    },
  },
};
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
